<template>
    <div class="page">
        <div class="header"></div>
        <!-- 登录卡片 -->
        <div class="login-box">
            <div class="login-title">
                娱乐信息管理系统
            </div>
            <br>
            <!-- 用户名 -->
            <div class="item">
                <el-input class="item-c" v-model="loginForm.username" type="text" placeholder="请输入员工用户名" prefix-icon="el-icon-user" ></el-input>
            </div>
            <!-- 密码 -->
            <div class="item">
                <el-input class="item-c" v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
            </div>
            <!-- 验证码 -->
            <div class="item">
                <el-input v-model="loginForm.validcode" type="text" placeholder="验证码" class="valid-code" prefix-icon="el-icon-key"></el-input>
                <img :src="validCodeUrl" alt="" class="valid-code-img" @click="changeValidCode()">
            </div>
            <div class="item">
               <el-checkbox v-model="checked">记住用户名密码</el-checkbox>
            </div>
            <div class="item">
                <el-button type="primary" @click="handleLogin()">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {v4 as uuidv4} from 'uuid'
    import { login,getOneByUsername } from '@/api/user'
    export default {
        name:'Login',
        data(){
            return{
                clientUid:'',
                validCodeUrl:'',
                checked:false,
                loginForm:{
                    username:'',
                    password:'',
                    validcode:''
                }
            }
        },
        created(){
            //初始化验证码
            this.changeValidCode();
            //初始化用户名密码
            var loginUser = JSON.parse(localStorage.getItem('loginUser'))
            if(loginUser){
                this.loginForm.username = loginUser.username
                this.loginForm.password = loginUser.password
                this.checked = true
            }
        },
        methods:{
            //绑定登录按钮事件
            handleLogin(){                
                this.loginForm.clientUid = this.clientUid;
                //调用登录接口
                login(this.loginForm).then(res=>{
                    //选中记住用户名密码
                    if(this.checked){
                        localStorage.setItem('loginUser',JSON.stringify({username:this.loginForm.username,password:this.loginForm.password}))
                    }else{
                        localStorage.setItem('loginUser',false)
                    }
                    //将token记录到cookie中
                    this.$Cookie.set('login-token',res.data,{expires: 7})
                    //获取登录用户信息
                    getOneByUsername({username:this.loginForm.username}).then(response=>{
                        let userInfo = response.data
                        if(userInfo.role === "ADMIN" || userInfo.role === "SUPER_ADMIN"){ //仅管理员权限可登录后台管理系统
                            //将登录用户信息记录到cookie中
                            this.$Cookie.set('userId',userInfo.id,{expires: 7})
                            this.$Cookie.set('username',userInfo.username,{expires: 7})
                            //登录成功调转到首页
                            this.$router.push('/#')
                        }      
                    }).catch(err=>{
                        console.log(err)
                    })
                    
                }).catch(err=>{
                    console.log(err)
                    this.changeValidCode()
                })
                
            },
            changeValidCode(){
                this.clientUid = uuidv4();//请求验证码图片生成一个唯一的标识符传给后端
                //请求的路径一样的情况下，不发出新的请求，需要传一个字符串进去
                this.validCodeUrl = '/admin-api/auth/validcode?clientUid=' + this.clientUid
            }
        }
    }
</script>

<style scoped>
    .page{
        background: url(../assets/images/background.png);
        background-size: cover; 
        height: 100%;
        box-sizing: border-box;
    }
    .header{
        width: 100%;
        height: 86px;
        background: #000;
    }
    .login-box{
        margin-top: 100px;
        margin-left: 200px;
        width: 460px;
        height: 460px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    }
    .login-title{
        display: flex;
        justify-content:center;
        line-height: 82px;
        font-size: 24px;
        font-weight: bold;
        background: url(../assets/images/header_bg.png);
        background-size: cover;
        width: 460px;
        height: 82px;
        color: #fff;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom: 4px solid #0098dc;
    }
    .item{
        margin: auto;
        width: 396px;
        padding: 10px 0;   
    }
    .item .el-button{
        margin-top: 10px;
        width: 100%;
        height: 48px;
        border-radius: 2em;
        background: #000;
        border: 1px solid #e8e8e8;
    }
    .el-input__inner{
        border-radius: 2em;
    }
    .item .el-button:hover{
        background-color: #1a1a1a;
    }
    .valid-code{
        width: 65%;
    }
    .valid-code-img{
        width: 120px;
        height: 42px;
        vertical-align: middle;
        margin-left: 15px;
    }
</style>